<script setup lang="ts">
import { onMounted } from 'vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

onMounted(() => {
  // 移动端初始化
  document.body.classList.add('mobile-app')
  
  // 禁用双击缩放
  document.addEventListener('touchstart', (e) => {
    if (e.touches.length > 1) {
      e.preventDefault()
    }
  })
  
  let lastTouchEnd = 0
  document.addEventListener('touchend', (e) => {
    const now = Date.now()
    if (now - lastTouchEnd <= 300) {
      e.preventDefault()
    }
    lastTouchEnd = now
  }, false)
})
</script>

<template>
  <div id="app" class="mobile-app">
    <router-view />
  </div>
</template>

<style>
.mobile-app {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  background-color: var(--el-bg-color-page);
  overflow-x: hidden;
}

/* 移动端全局样式重置 */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 允许输入框选择文本 */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* 移动端滚动优化 */
.el-scrollbar__wrap {
  -webkit-overflow-scrolling: touch;
}
</style>
